<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div>
    <div>HTML+CSS：</div>
    <!-- 条形统计图 -->
    <div id="div-line">



    </div>

  </div>

  <div>
    <div>SVG：</div>
    <!-- 条形统计图 -->
    <div>
      <svg width="300px" height="300px" viewBox="0 0 300 300">
        <g>
          <path d="M10 250 L10 50 L30 50 L30 250 z" fill="red"></path>
          <path d="M10 250 L10 100 L30 100 L30 250 z" fill="blue"></path>
        </g>
        <g>
          <path d="M50 250 L50 100 L70 100 L70 250 z" fill="red"></path>
          <path d="M50 250 L50 200 L70 200 L70 250 z" fill="blue"></path>
        </g>
        <g>
          <rect x="90" y="150" width="20" height="100" fill="red"></rect>
          <rect x="90" y="190" width="20" height="60" fill="blue"></rect>
        </g>
      </svg>
    </div>

    <!-- 图标: 动态cos -->
    <div>
      <svg width="200px" height="200px" viewBox="0 0 200 200">
        <path d="M100 0 A 100 100 0 0 1 100 200 Z" fill="red"></path>
        <path d="M100 0 A 100 100 0 0 0 0 100 L100 100 Z" fill="gray"></path>
        <path d="M0 100 Q 0 200 100 200 L100 100 Z" fill="yellow"></path>
      </svg>

    </div>


    <div>


    </div>

  </div>

  <div>
    <div> CANVAS:</div>
    <canvas id="canvasDom" width="300px" height="300px"></canvas>
  </div>


  <script>
    window.onload = function () {

      const canvasDom = document.getElementById('canvasDom')
      const context = canvasDom.getContext('2d')

      context.beginPath()
      context.moveTo(10, 10)
      context.strokeStyle = 'blue'
      context.strokeRect(20, 20, 20, 20)
      // context.fillStyle = "red"
      // context.fill()
      context.closePath()


    }
  </script>

</body>

</html>